<template>

    <Col :span="24">
        <chart :options="option" class="echarts" id="chart"></chart>

    </Col>

</template>

<style scoped>
    .echarts {
        border-radius: 4px;

        height: 250px;
        width: 100%;

    }


</style>

<script>


    var data = [{
        value: 1,
        name: '离线'
    }, {
        value: 1,
        name: '告警'
    }, {
        value: 30,
        name: '正常'
    }];


    export default {
        mounted() {
        },
        data: function () {

            return {


                option: {
                    backgroundColor: '#49586e',
                    title: {
                        text: '设备运行状况',
                        x: 'center',
                        y: 'center',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 20,
                            color: '#fff',
                        }
                    },
                    tooltip: {
                        show: true,
                        trigger: 'item',
                        formatter: "{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'vertical',
                        right: '5%',
                        top: '25%',
                        textStyle: {
                            fontWeight: 'normal',
                            fontSize: 16,
                            color: '#fff',
                        },
                        data: ['离线', '告警', '正常' ]
                    },
                    series: [{
                        type: 'pie',
                        selectedMode: 'single',
                        center: ['30%', '50%'],
                        radius: ['50%', '80%'],
                        // color: ['#86D560', '#AF89D6', '#59ADF3', '#FF999A', '#FFCC67'],
                        color: [  '#6a8bc0', '#4acacb', '#fe8676'],

                        label: {
                            normal: {
                                position: 'outter',
                                formatter: '{b}{c}',

                                textStyle: {
                                    color: '#fff',
                                    fontWeight: 'bold',
                                    fontSize: 12
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true
                            }
                        },
                        data: data
                    }]
                }


            }
        }
    }
</script>